<!DOCTYPE html><html class="appearance-auto" lang="en"><head><meta charset="UTF-8"><title>harhar~'s blog</title><meta name="description" content="There will be ample time ahead."><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1"><!-- Google Analytics --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q || []).push(arguments)},i[r].l=1 * new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', '', 'auto');
ga('send', 'pageview');</script><!-- End Google Analytics -->
<!-- Baidu Analytics --><!-- End Baidu Analytics --><link rel="icon" href="/images/swallow.png"><link rel="stylesheet" href="/style/common/bulma.css"><link rel="stylesheet" href="/style/base.css"><link rel="stylesheet" href="/style/common/helper.css"><script src="/js/common.js"></script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
</head><body class="is-flex is-flex-direction-column"><header class="is-flex header-widget is-flex-shrink-0 is-align-items-center is-justify-content-space-between is-hidden-mobile"><section class="is-hidden-mobile is-flex-shrink-0"><h2><a href="/">harhar~'s blog</a></h2></section><h3 class="is-hidden-mobile is-family-serif is-full-height is-flex is-align-items-center is-flex-shrink-0"></h3><aside class="is-flex-shrink-0"><h3 class="is-inline-block"><a href="/">Home</a></h3><h3 class="is-inline-block"><a href="/about">About</a></h3><h3 class="is-inline-block"><a href="/archives">Archives</a></h3></aside></header><header class="is-flex header-widget is-flex-shrink-0 is-align-items-center is-justify-content-center is-hidden-tablet"><h3 class="is-inline-block"><a href="/">Home</a></h3><h3 class="is-inline-block"><a href="/about">About</a></h3><h3 class="is-inline-block"><a href="/archives">Archives</a></h3></header><main><article id="page"><h1></h1><!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>天地图－地图API－范例-柱状图</title>
<link href="/images/swallow.png" type="image/x-icon" rel="Shortcut Icon"/>
<style type="text/css">
	html {
		height: 100%
	}

	body {
		height: 100%;
		margin: 0;
		padding: 0
	}

	#map-canvas {
		height: 100%;
		fill: #000000;
	}
</style>
</head>
<body>
	<div id="map-canvas"></div>
</body>
<script src=" http://api.tianditu.gov.cn/api?v=4.0&tk=31beaaf35b5b8d479e6d25ec08edb15c" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
<script>
    var countries = [];
    var countriesOverlay = new T.D3Overlay(init, redraw);
    var pieOverlay = new T.D3Overlay(initZhu, redrawZhu);
    var map = new T.Map("map-canvas");
    map.centerAndZoom(new T.LngLat(116.39769, 40.25945), 9)

    d3.json("http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/BEIJING_country.json", function (data) {
        countries = data.features;
        map.addOverLay(countriesOverlay)
        countriesOverlay.bringToBack();
        map.addOverLay(pieOverlay)
    });

    function init(sel, transform) {
        var upd = sel.selectAll('path.geojson').data(countries);
        upd.enter()
                .append('path')
                .attr("class", "geojson")
                .attr('stroke', 'black')
                .attr('fill', function (d, i) {
                    return d3.hsl(Math.random() * 360, 0.9, 0.5)
                })
                .attr('fill-opacity', '0.5')


    }

    function redraw(sel, transform) {
        sel.selectAll('path.geojson').each(
                function (d, i) {
                    d3.select(this).attr('d', transform.pathFromGeojson)
                }
        )

    }


    var color = d3.scale.category10();
    var width = 40;
    var height = 60;

    function initZhu(sel, transform) {
        var rects = sel.selectAll('g.rectg').data(countries)
                .enter()
                .append('g')
                .attr("class", "rectg")



        rects.each(function (d1, i) {
            if (d1 && d1.properties && d1.properties.ages) {
                var ages2010 = d1.properties.ages.split(",");
                var date1 = [ages2010[0], ages2010[1], ages2010[2]]
                var max=Math.max(ages2010[0], ages2010[1], ages2010[2]);
                d3.select(this).selectAll('g.rect').data(date1).enter()
                        .append("rect")
                        .attr("class", "rect")
                        .attr("x", function (d2, i) {
                            return i * width / 3 - width / 2;
                        })
                        .attr("y", function (d2, i) {
                            return -d2 / max * height;
                        })
                        .attr("width", function (d, i) {
                            return width / 3 - 2;
                        })
                        .attr("height", function (d2, i) {
                            return d2 / max * height;
                        })
                        .attr("fill", function (d, i) {
                            return color(i);
                        })
            }

        })
    }

    function redrawZhu(sel, transform) {
        sel.selectAll('g.rectg').each(
                function (d, i) {
                    if (d && d.properties && d.properties.lat && d.properties.lng) {
                        var _latlng = new T.LngLat(d.properties.lng, d.properties.lat);
                        d3.select(this)
                                .attr("transform", "translate(" + map.lngLatToLayerPoint(_latlng).x + "," + map.lngLatToLayerPoint(_latlng).y + ")");
                    }
                }
        )
    }
</script>
</html></article><div id="paginator"></div></main><footer class="is-flex is-flex-direction-column is-align-items-center is-flex-shrink-0 is-family-serif"><section class="sns-container"><!-- Github--><a title="github" target="_blank" rel="noopener nofollow" href="//github.com/harharharharharhar"><i class="iconfont icon-github"></i></a><!-- Ins--><!-- RSS--><!-- 知乎--><!-- 领英--><!-- 脸书--></section><p><span>Copyright ©</span><span> harhar~ 2021</span></p><div class="is-flex is-justify-content-center is-flex-wrap-wrap"><p>Powered by Hexo &verbar;&nbsp;</p><p class="is-flex is-justify-content-center"><a title="Hexo theme author" target="_blank" rel="noopener" href="//github.com/haojen">Theme by Haojen&nbsp;</a></p><div style="margin-top: 2px"><a class="github-button" title="github-button" target="_blank" rel="noopener" href="https://github.com/haojen/hexo-theme-Claudia" data-color-scheme="no-preference: light; light: light; dark: dark;" data-show-count="true"></a></div></div><div><span></span></div></footer><script async defer src="https://buttons.github.io/buttons.js"></script></body></html>